<template>
  <div class="task-container">
    <!-- PC 端视图 -->
    <el-card v-if="isPC" class="box-card">
      <template #header>
        <div class="card-header">
          <span>学生任务列表</span>
          <el-button type="primary" @click="fetchData">刷新数据</el-button>
        </div>
      </template>
      
      <!-- 添加筛选表单 -->
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="姓名">
          <el-input v-model="filterForm.realName" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="filterForm.stuNum" placeholder="请输入学号" clearable />
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="filterForm.className" placeholder="请选择班级" clearable>
            <el-option label="全部" value="" />
            <el-option label="22软件技术1班" value="22软件技术1班" />
            <el-option label="22软件技术2班" value="22软件技术2班" />
            <el-option label="22软件技术3班" value="22软件技术3班" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filterForm.state" placeholder="请选择状态" clearable>
            <el-option label="全部" value="" />
            <el-option label="在学" value="在学" />
            <el-option label="未学" value="未学" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="applyFilter">筛选</el-button>
        </el-form-item>
      </el-form>
      
      <el-table :data="filteredTaskData" style="width: 100%" v-loading="loading">
        <el-table-column prop="realName" label="姓名" width="120" />
        <el-table-column prop="stuNum" label="学号" width="120" />
        <el-table-column prop="className" label="班级" width="180" />
        <el-table-column prop="taskName" label="任务名称" />
        <el-table-column prop="state" label="状态" width="100" />
        <el-table-column prop="taskDeadline" label="截止时间" width="180" />
        <el-table-column prop="calScore" label="得分" width="100" />
      </el-table>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :small="false"
        :disabled="loading"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="pagination-container"
      />
    </el-card>

    <!-- 移动端视图 -->
    <div v-else class="mobile-view">
      <van-search v-model="filterForm.realName" placeholder="请输入姓名" @search="applyFilter" />
      <van-dropdown-menu>
        <van-dropdown-item v-model="filterForm.className" :options="classOptions" @change="applyFilter" />
        <van-dropdown-item v-model="filterForm.state" :options="stateOptions" @change="applyFilter" />
      </van-dropdown-menu>

      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in mobileDisplayData" :key="item.stuNum" @click="viewDetail(item)">
          <template #title>
            <div class="cell-title">{{ item.realName }} ({{ item.stuNum }})</div>
          </template>
          <template #label>
            <div class="cell-label">班级: {{ item.className }} | 状态: {{ item.state }}</div>
            <div class="cell-label">任务: {{ item.taskName }} | 截止: {{ item.taskDeadline }}</div>
          </template>
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
      </van-list>
      <!-- Vant 的加载更多和分页通常集成在 List 组件中，不需要单独的 pagination -->
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const taskData = ref([]); // 存储所有从API获取的数据
const loading = ref(false);

// 分页相关数据 (PC端使用)
const currentPage = ref(1);
const pageSize = ref(20); // 将默认的 pageSize 从 10 调整为 20
const total = ref(0);

// 移动端显示数据
const mobileDisplayData = ref([]);

// 计算属性，用于PC端根据当前页和每页大小显示数据
// 移动端不再直接使用此计算属性进行切片，而是通过 onLoad 逐步加载
const paginatedTaskData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredTaskData.value.slice(start, end);
});

// 新增筛选表单数据
const filterForm = ref({
  realName: '',
  stuNum: '',
  className: '', // 新增班级筛选字段
  state: ''
});

// 计算属性：应用筛选条件
const filteredTaskData = computed(() => {
  return taskData.value.filter(item => {
    const matchesName = !filterForm.value.realName || 
      item.realName.includes(filterForm.value.realName);
    const matchesStuNum = !filterForm.value.stuNum || 
      item.stuNum.includes(filterForm.value.stuNum);
    const matchesClassName = !filterForm.value.className || // 新增班级筛选逻辑
      item.className === filterForm.value.className;
    const matchesState = !filterForm.value.state || 
      item.state === filterForm.value.state;
    
    return matchesName && matchesStuNum && matchesClassName && matchesState; // 组合筛选条件
  });
});

// 应用筛选
const applyFilter = () => {
  currentPage.value = 1; // 筛选后回到第一页
  // 筛选后，更新PC端总数
  total.value = filteredTaskData.value.length;

  // 移动端筛选后，清空已显示数据，重置加载状态
  mobileDisplayData.value = [];
  finished.value = false; // 重置 finished 状态，允许重新加载
  loading.value = false; // 重置 loading 状态
  // 触发 Vant List 重新加载第一页数据
  // 注意：Vant List 在 finished 为 false 且数据为空时会自动触发一次 onLoad
  // 如果没有自动触发，可能需要手动调用 onLoad() 或确保列表可见
  if (!isPC.value) {
    onLoad(); // 移动端手动触发一次加载，以显示筛选后的第一页数据
  }
  ElMessage.success('筛选条件已应用');
};

const fetchData = async () => {
  try {
    loading.value = true;
    const response = await axios.get('/api/queryresult/studylist', {
      params: {
        currNo: 43, 
        taskID: 608,
        state: 'all' 
      }
    });
    
    if (response.data.errno === 0) {
      taskData.value = response.data.data; // 获取所有数据
      // 初始加载时，total 应该反映所有数据
      total.value = taskData.value.length; 
      console.log('筛选前数据:', taskData.value.length); 
      console.log('筛选后数据:', filteredTaskData.value.length); // 此时 filteredTaskData 应该等于 taskData
      ElMessage.success('数据加载成功');

      // 初始加载完成后，如果当前是移动端，触发一次 onLoad 来填充 mobileDisplayData
      if (!isPC.value) {
        onLoad();
      }

    } else {
      ElMessage.error('获取数据失败');
    }
  } catch (error) {
    ElMessage.error('请求出错: ' + error.message);
  } finally {
    loading.value = false; // 取消注释这一行，确保加载状态在请求结束后重置
  }
};

// 处理每页显示条数变化 (PC端)
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1; // 改变每页大小后回到第一页
};

// 处理当前页变化 (PC端)
const handleCurrentChange = (val) => {
  currentPage.value = val;
};

// 移动端相关数据和方法
const isPC = ref(true); // 判断是否是 PC 端
const finished = ref(false); // Vant List 组件的 finished 状态

const classOptions = ref([
  { text: '全部', value: '' },
  { text: '22软件技术1班', value: '22软件技术1班' },
  { text: '22软件技术2班', value: '22软件技术2班' },
  { text: '22软件技术3班', value: '22软件技术3班' },
]);

const stateOptions = ref([
  { text: '全部', value: '' },
  { text: '在学', value: '在学' },
  { text: '未学', value: '未学' },
]);

const checkDevice = () => {
  isPC.value = window.innerWidth > 768; // 假设 768px 为 PC 和移动端的分界线
};

onMounted(() => {
  checkDevice();
  window.addEventListener('resize', checkDevice);
  fetchData(); // 在这里调用 fetchData
});

onUnmounted(() => {
  window.removeEventListener('resize', checkDevice);
});

// Vant List 的加载方法
const onLoad = () => {
  // 移动端加载更多逻辑
  // 确保在加载中或已完成时不重复加载
  if (loading.value || finished.value) {
    return;
  }

  loading.value = true; // 设置加载状态为 true

  // 模拟异步加载，实际项目中可能需要从API获取更多数据
  setTimeout(() => {
    const currentLoadedCount = mobileDisplayData.value.length;
    const remainingData = filteredTaskData.value.slice(currentLoadedCount);

    if (remainingData.length > 0) {
      // 计算本次要加载的数据量，例如每次加载 pageSize 条
      const dataToLoad = remainingData.slice(0, pageSize.value); // 使用 pageSize
      mobileDisplayData.value.push(...dataToLoad);

      // 如果剩余数据不足一页，或者已经加载完所有筛选后的数据
      if (mobileDisplayData.value.length >= filteredTaskData.value.length) {
        finished.value = true;
      }
    } else {
      finished.value = true; // 所有数据已加载完毕
    }
    loading.value = false; // 加载完成，设置加载状态为 false
  }, 500); // 模拟网络请求延迟
};

// 确保在组件挂载时调用 fetchData 来获取数据
onMounted(() => {
  checkDevice();
  window.addEventListener('resize', checkDevice);
  fetchData(); // 在这里调用 fetchData
});

onUnmounted(() => {
  window.removeEventListener('resize', checkDevice);
});
</script>

<style scoped>
.task-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}

.box-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.pagination-container {
  margin-top: 20px;
  justify-content: flex-end;
  display: flex;
}

/* 新增筛选表单样式 */
.filter-form {
  margin-bottom: 20px;
}

/* 移动端视图的额外样式 */
.mobile-view {
  padding: 10px;
}

.cell-title {
  font-weight: bold;
  font-size: 16px;
}

.cell-label {
  font-size: 12px;
  color: #666;
}
</style>